<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Testing</title>
  </head>
  <body>
    <div id="app">
      <el-divider>测试页面</el-divider>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>视频</span>
          </div>
        </template>
        <div>
          <el-row :gutter="20">
            <el-col :span="10">
              <video autoplay playsinline></video>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-select v-model="videoInputDevice" placeholder="Select">
                <!-- videoinput: FaceTime高清摄像头 (1C1C:B782) id = e7009e696b182012f2e0ae3b5ace7d8e91259a9fc2fa51ee4cad77d307d52cf5 -->
                <el-option
                  v-for="device in videoInputDevices"
                  :key="device.deviceId"
                  :label="device.label"
                  :value="device.deviceId"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>音频</span>
          </div>
        </template>
        <div>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-divider content-position="left">麦克风</el-divider>
              <el-select v-model="audioInputDevice" placeholder="Select">
                <!-- videoinput: FaceTime高清摄像头 (1C1C:B782) id = e7009e696b182012f2e0ae3b5ace7d8e91259a9fc2fa51ee4cad77d307d52cf5 -->
                <el-option
                  v-for="device in audioInputDevices"
                  :key="device.deviceId"
                  :label="device.label"
                  :value="device.deviceId"
                />
              </el-select>
            </el-col>
            <el-col :span="10" :offset="2">
              <el-divider content-position="left">扬声器</el-divider>
              <el-select v-model="audioOutputDevice" placeholder="Select">
                <el-option
                  v-for="device in audioOutputDevices"
                  :key="device.deviceId"
                  :label="device.label"
                  :value="device.deviceId"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px">
            <el-col :span="2">
              <span>输出等级</span>
            </el-col>
            <el-col :span="8">
              <div>
                <el-progress :percentage="50" :stroke-width="15" striped />
              </div>
            </el-col>
            <el-col :span="2" :offset="2">
              <span>输入等级</span>
            </el-col>
            <el-col :span="8">
              <div>
                <el-slider v-model="audioInputVolume" show-input />
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 15px">
            <el-col :span="2">
              <span>输出音量</span>
            </el-col>
            <el-col :span="8">
              <div>
                <el-slider v-model="audioInputVolume" show-input />
              </div>
            </el-col>
            <el-col :span="2" :offset="2">
              <span>输入音量</span>
            </el-col>
            <el-col :span="8">
              <div>
                <el-slider v-model="audioInputVolume" show-input />
              </div>
            </el-col>
          </el-row>
          <el-divider content-position="left">配置参数</el-divider>
          <el-row style="margin-top: 15px">
            <el-col :span="2">
              <span>回音消除：</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="echoCancellation" placeholder="Select">
                <el-option
                  v-for="option in defaultOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row style="margin-top: 15px">
            <el-col :span="2">
              <span>降噪：</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="noiseSuppression" placeholder="Select">
                <el-option
                  v-for="option in defaultOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row style="margin-top: 15px">
            <el-col :span="2">
              <span>自动增益功能：</span>
            </el-col>
            <el-col :span="4">
              <el-select v-model="autoGainControl" placeholder="Select">
                <el-option
                  v-for="option in defaultOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
            videoInputDevice: "",
            videoInputDevices: [],
            audioInputVolume: 0,
            audioInputDevice: "",
            audioInputDevices: [],
            audioOutputVolume: 0,
            audioOutputDevice: "",
            audioOutputDevices: [],
            echoCancellation: "0",
            noiseSuppression: "0",
            autoGainControl: "0",
            defaultOptions: [
              { value: "0", label: "默认" },
              { value: "1", label: "开启" },
              { value: "2", label: "关闭" },
            ],
          };
        },
        mounted() {
          //const video = this.$refs.video;
          //navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
          //  video.srcObject = stream;
          //});
          navigator.mediaDevices.enumerateDevices().then((devices) => {
            devices.forEach((device) => {
              // https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo
              console.log(
                device.kind +
                  ": " +
                  device.label +
                  " id = " +
                  device.deviceId +
                  " groupId = " +
                  device.groupId
              );
              // "videoinput", "audioinput" or "audiooutput
              if (device.kind === "videoinput") {
                this.videoInputDevices.push(device);
                if (this.videoInputDevice === "") {
                  this.videoInputDevice = device.deviceId;
                }
              } else if (device.kind === "audioinput") {
                this.audioInputDevices.push(device);
                if (device.deviceId === "default") {
                  this.audioInputDevice = device.deviceId;
                }
              } else if (device.kind === "audiooutput") {
                this.audioOutputDevices.push(device);
                if (device.deviceId === "default") {
                  this.audioOutputDevice = device.deviceId;
                }
              }
            });
          });
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
